<template>
    <el-row :gutter="12">
        <el-col :span="6">
            <el-card shadow="always" class="statistic_count">
                <span>商品总数 : {{ shopnums }} </span>
                <el-button @click="getProductData">更新</el-button>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card shadow="always" class="statistic_count">
                <span> 用户总数 : {{ usernums }} </span>
                <el-button @click="getUserData">更新</el-button>
            </el-card>
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="12">
            <div ref="main" id="main_chat"></div>
        </el-col>
        <el-col :span="12"><div id="main_kchat"></div></el-col>
    </el-row>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import { shopnum, usernum } from "../api/api/num";
import { simpleData, Ksimple } from "@/api/api/statistics";
const main = ref(null);
const usernums = ref(0);
const shopnums = ref(0);
onMounted(() => {
    shopnum().then((res) => {
        shopnums.value = res.data.data;
    });
    simpleData().then((res) => {
        const myChart = echarts.init(document.getElementById("main_chat"));
        console.log("simple", res);
        let xData = res.data.data.map((v) => v.x);
        let yData = res.data.data.map((v) => v.val);

        myChart.setOption({
            title: {
                text: "商品销量",
            },
            tooltip: {},
            xAxis: {
                data: xData,
            },
            yAxis: {},
            series: [
                {
                    name: "销量",
                    type: "bar",
                    data: yData,
                },
            ],
        });
    });
    Ksimple().then((res) => {
        console.log(res);
        let { x, val } = res.data.data;
        let myChart = echarts.init(document.getElementById("main_kchat"));
        let option = {
            xAxis: {
                data: x,
            },
            yAxis: {},
            series: [
                {
                    type: "candlestick",
                    data: val,
                },
            ],
        };
        myChart.setOption(option);
    });
    usernum().then((res) => {
        console.log(res);
        usernums.value = res.data.data;
    });
    // const myChart = echarts.init(main.value);

    /*     myChart.setOption({
        title: {
            text: "ECharts 入门示例",
        },
        tooltip: {},
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
            {
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20],
            },
        ],
    }); */
});
</script>
<style lang="css" scoped>
.el-row {
    margin-bottom: 20px;
}
.el-row:last-child {
    margin-bottom: 0;
}
.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
#main_chat {
    height: 400px;
}
#main_chat {
    width: 100%;
    height: 70vh;
}
#main_kchat {
    width: 100%;
    height: 70vh;
}
</style>
